<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>医院管理系统</title>
  <!-- Vue3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- ElementPlus -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/element-plus"></script>
  <!-- Axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; }
    .app-container{display:flex;min-height:100vh;background:#f5f7fa}
    /* 侧边栏 */
    .sidebar{width:240px;background:#001529;color:white;transition:width .3s}
    .sidebar.collapsed{width:64px}
    .logo{height:60px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #333;padding:0 20px}
    .logo h1{color:white;font-size:18px;white-space:nowrap;overflow:hidden}
    .sidebar.collapsed .logo h1{display:none}
    .menu-item{padding:12px 20px;cursor:pointer;display:flex;align-items:center;color:rgba(255,255,255,.8);transition:background-color .3s}
    .menu-item:hover{background:#1890ff;color:white}
    .menu-item.active{background:#1890ff;color:white}
    .menu-item i{margin-right:12px;width:16px;text-align:center}
    .sidebar.collapsed .menu-item span{display:none}
    /* 主内容 */
    .main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
    .header{height:60px;background:white;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
    .header-left{display:flex;align-items:center}
    .collapse-btn{font-size:18px;cursor:pointer;margin-right:16px;color:#666}
    .breadcrumb{font-size:14px;color:#666}
    .user-info{display:flex;align-items:center}
    .user-avatar{width:32px;height:32px;border-radius:50%;background:#409eff;color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;margin-right:8px}
    .content{flex:1;padding:24px;overflow:auto}
    /* 欢迎页 */
    .welcome-container{text-align:center;padding:60px 20px}
    .welcome-icon{font-size:64px;color:#409eff;margin-bottom:20px}
    .welcome-title{font-size:24px;color:#303133;margin-bottom:12px}
    .welcome-desc{color:#606266;font-size:16px}
  </style>
</head>
<body>
<div id="app">
  <div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar" :class="{ collapsed: isCollapsed }">
      <div class="logo"><h1>医院管理系统</h1></div>
      <div class="menu">
        <div v-for="m in accessibleMenus" :key="m.key"
             class="menu-item" :class="{ active: activeMenu === m.key }"
             @click="switchMenu(m.key)">
          <i :class="m.icon"></i><span>{{ m.name }}</span>
        </div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="main-content">
      <div class="header">
        <div class="header-left">
          <div class="collapse-btn" @click="toggleSidebar"><i class="fas fa-bars"></i></div>
          <div class="breadcrumb">{{ breadcrumb }}</div>
        </div>
        <div class="user-info">
          <div class="user-avatar">{{ userInfo.name?userInfo.name.charAt(0).toUpperCase():'U' }}</div>
          <span style="margin-right:16px;">
            {{ userInfo.name||'用户' }}
            <el-tag size="small" :type="getRoleTagType(userInfo.role)" style="margin-left:8px;">{{ getRoleText(userInfo.role) }}</el-tag>
          </span>
          <el-button size="small" @click="handleLogout"><i class="fas fa-sign-out-alt"></i> 退出</el-button>
        </div>
      </div>

      <div class="content">
        <!-- 系统首页 -->
        <div v-if="activeMenu==='dashboard'" class="welcome-container">
          <div class="welcome-icon"><i class="fas fa-hospital"></i></div>
          <h1 class="welcome-title">欢迎使用医院管理系统</h1>
          <p class="welcome-desc">请从左侧菜单选择要管理的功能模块</p>
        </div>

        <!-- 各模块 -->
        <div v-if="activeMenu==='user'">
          <iframe src="user-management.html" style="width:100%;height:calc(100vh - 120px);border:none;border-radius:8px;"></iframe>
        </div>
        <div v-if="activeMenu==='department'">
          <iframe src="Department.html" style="width:100%;height:calc(100vh - 120px);border:none;border-radius:8px;"></iframe>
        </div>
        <div v-if="activeMenu==='appointment'">
          <iframe src="appointment-management.html" style="width:100%;height:calc(100vh - 120px);border:none;border-radius:8px;"></iframe>
        </div>
        <div v-if="activeMenu==='diagnosis'">
          <iframe src="diagnosis.html" style="width:100%;height:calc(100vh - 120px);border:none;border-radius:8px;"></iframe>
        </div>
        <div v-if="activeMenu==='medicine'">
          <iframe src="medicine-add.html" style="width:100%;height:calc(100vh - 120px);border:none;border-radius:8px;"></iframe>
          </div>
        </div>
        <div v-if="activeMenu==='ai-chat'">
          <iframe src="AiChat.html" style="width:100%;height:calc(100vh - 120px);border:none;border-radius:8px;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  /* =====  axios 默认配置  ===== */
  axios.defaults.baseURL = 'http://localhost:8080';
  axios.defaults.headers.post['Content-Type'] = 'application/json';
  axios.defaults.withCredentials = true;

  const { createApp, ref, reactive, onMounted, computed } = Vue;
  const { ElMessage, ElMessageBox } = ElementPlus;

  createApp({
    setup() {
      const isCollapsed = ref(false);
      const activeMenu = ref('dashboard');
      const breadcrumb = ref('系统首页');
      const userInfo = reactive({});

      /* 权限数据 */
      const rolePermissions = {
        admin:  ['dashboard','user','department','appointment','diagnosis','medicine','ai-chat'],
        doctor: ['dashboard','appointment','diagnosis','ai-chat'],
        patient:['dashboard','ai-chat']
      };
      const allMenus = [
        { key: 'dashboard',  name: '系统首页',   icon: 'fas fa-tachometer-alt' },
        { key: 'user',       name: '用户管理',   icon: 'fas fa-users' },
        { key: 'department', name: '科室管理',   icon: 'fas fa-hospital' },
        { key: 'appointment',name: '预约管理',   icon: 'fas fa-calendar-check' },
        { key: 'diagnosis',  name: '诊断管理',   icon: 'fas fa-stethoscope' },
        { key: 'medicine',   name: '药品管理',   icon: 'fas fa-pills' },
        { key: 'ai-chat',    name: 'AI医疗助手', icon: 'fas fa-robot' }
      ];

      /* 计算可见菜单 */
      const accessibleMenus = computed(() => {
        if (!userInfo.role) return [];
        const allow = rolePermissions[userInfo.role] || [];
        return allMenus.filter(m => allow.includes(m.key));
      });

      /* 角色文案 & 标签颜色 */
      const getRoleText = (role) =>({ admin:'管理员',doctor:'医生',patient:'患者' }[role]||role);
      const getRoleTagType = (role) =>({ admin:'danger',doctor:'warning',patient:'success' }[role]||'info');

      /* 切换菜单（带权限校验）*/
      const switchMenu = (key) => {
        const allow = rolePermissions[userInfo.role] || [];
        if (!allow.includes(key)) {
          ElMessage.warning('您没有权限访问此功能');
          return;
        }
        activeMenu.value = key;
        const map = {
          dashboard:'系统首页', user:'用户管理', department:'科室管理',
          appointment:'预约管理', diagnosis:'诊断管理', medicine:'药品管理', 'ai-chat':'AI医疗助手'
        };
        breadcrumb.value = map[key] || '系统首页';
      };

      const toggleSidebar = () => (isCollapsed.value = !isCollapsed.value);

      /* 加载用户信息 */
      const loadUserInfo = () => {
        try {
          const u = JSON.parse(localStorage.getItem('userInfo')||'{}');
          Object.assign(userInfo, u);
          /* 患者默认进 AI 聊天 */
          if (u.role === 'patient') {
            activeMenu.value = 'ai-chat';
            breadcrumb.value = 'AI医疗助手';
          }
        } catch {}
      };

      /* 检查登录状态 */
      const checkLoginStatus = () => {
        const u = localStorage.getItem('userInfo');
        if (!u) {
          ElMessage.warning('请先登录');
          setTimeout(() => location.href = '/login.html', 1000);
          return false;
        }
        try {
          const usr = JSON.parse(u);
          if (usr.status === 0) {
            ElMessage.error('账号已被禁用，请联系管理员');
            localStorage.removeItem('userInfo');
            setTimeout(() => location.href = '/login.html', 2000);
            return false;
          }
        } catch {}
        return true;
      };

      /* 退出登录 */
      const handleLogout = async () => {
        try {
          await ElMessageBox.confirm('确定要退出登录吗？','确认退出',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' });
          localStorage.removeItem('userInfo');
          location.href = '/login.html';
        } catch {}
      };

      onMounted(() => {
        if (!checkLoginStatus()) return;
        loadUserInfo();
      });

      return {
        isCollapsed,
        activeMenu,
        breadcrumb,
        userInfo,
        accessibleMenus,
        getRoleText,
        getRoleTagType,
        toggleSidebar,
        switchMenu,
        handleLogout
      };
    }
  }).use(ElementPlus).mount('#app');
</script>
</body>
</html>